<template>
  <grid-layout class="event-high-list" :layout="layout">
    <div #left>
      <ranking-list :api="getListDataAsync" :params="rankingParams" />
    </div>
    <div #center>
      <common-table :api="getDataAsync" :api-params="tableParams" :columns="columns" :scroll="{ y: 600 }">
        <template #index="{ index }">
          <span>{{ index + 1 }}</span>
        </template>
        <template #action="{ scope }">
          <a-button @click="showDetails(scope)">详情</a-button>
        </template>
      </common-table>
    </div>
  </grid-layout>
</template>

<script>
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import RankingList from '@/components/ranking-list';
import CommonTable from '@gis/lib/components/antd-table/index.vue';
import { dialog } from '@gis/lib/components/antd-dialog';
import { eventList } from '@gis/lib/api';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
export default {
  name: 'event-high-list',
  components: { CommonTable, RankingList, GridLayout },
  data() {
    return {
      area: '',
      treeData: [],
      details: [],
      layout: [
        { name: 'left', colSpan: 4 },
        { name: 'center', colSpan: 20 },
      ],
      statusIcon: {
        // 1: import("../assets/zhili_ic_warngreen.png"),
        // 2: import("../assets/zhili_ic_warnyellow.png"),
        // 3: import("../assets/zhili_ic_warnred.png"),
      },
      formOptions: [
        {
          elem: 'a-input',
          props: { value: '' },
          events: {},
          layout: { span: 24, labelCol: 4, wrapperCol: 14 },
        },
      ],
      columns: [
        {
          title: '状态',
          dataIndex: 'state',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '描述',
          dataIndex: 'des',
          ellipsis: true,
        },
        {
          title: '类别',
          dataIndex: 'p_type_name',
          ellipsis: true,
        },
        {
          title: '类型',
          dataIndex: 'c_type_name',
          ellipsis: true,
        },
        {
          title: '事发时间',
          dataIndex: 'create_time',
          ellipsis: true,
        },
        {
          title: '事发地点',
          dataIndex: 'location',
          ellipsis: true,
        },
        {
          title: '上报人',
          dataIndex: 'report_person_name',
          ellipsis: true,
        },
        {
          title: '详情',
          scopedSlots: { customRender: 'action' },
          width: 90,
          align: 'center',
        },
      ],
    };
  },
  computed: {
    area_code() {
      const { area_code } = useUserInfoStore();
      return area_code;
    },
    tableParams() {
      return {
        area_code: this.area_code,
        report_person_name: this.area,
        page_number: 1,
        page_size: 10,
      };
    },
    rankingParams() {
      return {
        area_code: this.area_code,
        year: 2021,
        month: '2021-8',
      };
    },
  },
  methods: {
    async getListDataAsync(params) {
      return await this.$axios.get('/xw-microservice/v3/warn-people/getZhzlYJ2', {
        params,
      });
    },
    async getDataAsync(params) {
      if (!params || !params.area_code) return;
      return this.handleTableResult(await eventList(params));
    },
    showDetails({ event_id }) {
      dialog({
        content: () => import('@/views/event-manage/components/event-details.vue'),
        contentProps: { event_id },
        dialogProps: {
          title: '事件详情',
          width: 'medium',
          height: 'fixed',
          footer: null,
          centered: true,
        },
      });
    },
  },
};
</script>

<style scoped></style>
